import React from 'react';
import { connect } from 'dva';
import 'antd-mobile/dist/antd-mobile.css';
import { routerRedux } from 'dva/router';
import { NavBar,Card ,List} from 'antd-mobile';

const Item = List.Item;


@connect(({ cars }) => ({
  store: cars,
}))

export default class  SeriesList extends React.Component{

  itemClick = (item)=>{
    this.props.dispatch({
      type:'cars/set_series',
      payload:item
    })
    this.props.dispatch(routerRedux.push('/'));
  }

  render(){
    var list = this.props.store.activeBrand.children ;
    return (
      <Card>
        <NavBar
          mode="dark"
          leftContent={'返回'}
          onLeftClick={() => {
            this.props.dispatch(routerRedux.goBack());
          }}
        >车系选择</NavBar>
        <List renderHeader={() => '车系'} className="my-list">
          {
            list.map(m=>{
              return  <Item key={m.value} onClick={()=>{
                this.itemClick(m)
              }} extra={''}>{m.label}</Item>
            })
          }
        </List>
      </Card>
    );
  }
}

